<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据分析2</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/themes/essos.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">

</head>
<body>
    <style>.box {  } </style>
        
    <div class="box">
                <div id="8dce31e84b0f411c8c1148215dc6a931" class="chart-container" style="position: absolute; width: 1291.00378px; height: 579.00378px; top: 49.31569290161133px; left: 55.99622344970703px;"></div>
    <script>
        var chart_8dce31e84b0f411c8c1148215dc6a931 = echarts.init(
            document.getElementById('8dce31e84b0f411c8c1148215dc6a931'), 'essos', {renderer: 'canvas'});
        var option_8dce31e84b0f411c8c1148215dc6a931 = {
    "backgroundColor": "white",
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "series": [
        {
            "type": "map",
            "name": "\u7b54\u5377\u6570\u91cf",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            },
            "mapType": "china",
            "data": [
                {
                    "name": "\u4e0a\u6d77",
                    "value": 748
                },
                {
                    "name": "\u4e91\u5357",
                    "value": 672
                },
                {
                    "name": "\u5185\u8499\u53e4",
                    "value": 371
                },
                {
                    "name": "\u5317\u4eac",
                    "value": 942
                },
                {
                    "name": "\u53f0\u6e7e",
                    "value": 655
                },
                {
                    "name": "\u5409\u6797",
                    "value": 1188
                },
                {
                    "name": "\u56db\u5ddd",
                    "value": 993
                },
                {
                    "name": "\u5929\u6d25",
                    "value": 840
                },
                {
                    "name": "\u5b81\u590f",
                    "value": 1254
                },
                {
                    "name": "\u5b89\u5fbd",
                    "value": 1034
                },
                {
                    "name": "\u5c71\u4e1c",
                    "value": 763
                },
                {
                    "name": "\u5c71\u897f",
                    "value": 1158
                },
                {
                    "name": "\u5e7f\u4e1c",
                    "value": 1016
                },
                {
                    "name": "\u5e7f\u897f",
                    "value": 869
                },
                {
                    "name": "\u65b0\u7586",
                    "value": 778
                },
                {
                    "name": "\u6c5f\u82cf",
                    "value": 762
                },
                {
                    "name": "\u6c5f\u897f",
                    "value": 869
                },
                {
                    "name": "\u6cb3\u5317",
                    "value": 1086
                },
                {
                    "name": "\u6cb3\u5357",
                    "value": 762
                },
                {
                    "name": "\u6d59\u6c5f",
                    "value": 947
                },
                {
                    "name": "\u6d77\u5357",
                    "value": 972
                },
                {
                    "name": "\u6e56\u5317",
                    "value": 696
                },
                {
                    "name": "\u6e56\u5357",
                    "value": 622
                },
                {
                    "name": "\u6fb3\u95e8",
                    "value": 1049
                },
                {
                    "name": "\u7518\u8083",
                    "value": 480
                },
                {
                    "name": "\u798f\u5efa",
                    "value": 1229
                },
                {
                    "name": "\u897f\u85cf",
                    "value": 624
                },
                {
                    "name": "\u8d35\u5dde",
                    "value": 707
                },
                {
                    "name": "\u8fbd\u5b81",
                    "value": 654
                },
                {
                    "name": "\u91cd\u5e86",
                    "value": 873
                },
                {
                    "name": "\u9655\u897f",
                    "value": 842
                },
                {
                    "name": "\u9752\u6d77",
                    "value": 1663
                },
                {
                    "name": "\u9999\u6e2f",
                    "value": 1334
                },
                {
                    "name": "\u9ed1\u9f99\u6c5f",
                    "value": 1060
                }
            ],
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "mapValueCalculation": "sum",
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                "\u7b54\u5377\u6570\u91cf"
            ],
            "selected": {
                "\u7b54\u5377\u6570\u91cf": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "\u7701\u4efd\u7b54\u9898\u5206\u5e03\u56fe",
            "padding": 5,
            "itemGap": 10
        }
    ],
    "visualMap": {
        "show": true,
        "type": "continuous",
        "min": 0,
        "max": 2000,
        "inRange": {
            "color": [
                "#50a3ba",
                "#eac763",
                "#d94e5d"
            ]
        },
        "calculable": true,
        "inverse": false,
        "splitNumber": 5,
        "orient": "vertical",
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 140,
        "borderWidth": 0
    }
};
        chart_8dce31e84b0f411c8c1148215dc6a931.setOption(option_8dce31e84b0f411c8c1148215dc6a931);
    </script>
<br/>                <div id="ab4afa0cf205492aa490911172f1d7ca" class="chart-container" style="position: absolute; width: 1238.00378px; height: 288.00378px; top: 665.353515625px; left: 114.98677825927734px;"></div>
    <script>
        var chart_ab4afa0cf205492aa490911172f1d7ca = echarts.init(
            document.getElementById('ab4afa0cf205492aa490911172f1d7ca'), 'light', {renderer: 'canvas'});
        var option_ab4afa0cf205492aa490911172f1d7ca = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u4fe1\u5b89",
                    "value": 0.172
                },
                {
                    "name": "\u5927\u6570\u636e",
                    "value": 0.212
                },
                {
                    "name": "\u6570\u5a92",
                    "value": 0.18
                },
                {
                    "name": "\u7f51\u5de5",
                    "value": 0.196
                },
                {
                    "name": "\u8ba1\u79d1",
                    "value": 0.081
                },
                {
                    "name": "\u8f6f\u5de5",
                    "value": 0.159
                }
            ],
            "radius": [
                70,
                100
            ],
            "center": [
                "15%",
                "55%"
            ],
            "label": {
                "show": true,
                "position": "center",
                "margin": 8,
                "formatter": "\u4e00\u822c : 35.8%"
            }
        },
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u4fe1\u5b89",
                    "value": 0.169
                },
                {
                    "name": "\u5927\u6570\u636e",
                    "value": 0.148
                },
                {
                    "name": "\u6570\u5a92",
                    "value": 0.181
                },
                {
                    "name": "\u7f51\u5de5",
                    "value": 0.139
                },
                {
                    "name": "\u8ba1\u79d1",
                    "value": 0.169
                },
                {
                    "name": "\u8f6f\u5de5",
                    "value": 0.194
                }
            ],
            "radius": [
                70,
                100
            ],
            "center": [
                "40%",
                "55%"
            ],
            "label": {
                "show": true,
                "position": "center",
                "margin": 8,
                "formatter": "\u7b80\u5355 : 33.9%"
            }
        },
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u4fe1\u5b89",
                    "value": 0.207
                },
                {
                    "name": "\u5927\u6570\u636e",
                    "value": 0.189
                },
                {
                    "name": "\u6570\u5a92",
                    "value": 0.159
                },
                {
                    "name": "\u7f51\u5de5",
                    "value": 0.149
                },
                {
                    "name": "\u8ba1\u79d1",
                    "value": 0.098
                },
                {
                    "name": "\u8f6f\u5de5",
                    "value": 0.198
                }
            ],
            "radius": [
                70,
                100
            ],
            "center": [
                "65%",
                "55%"
            ],
            "label": {
                "show": true,
                "position": "center",
                "margin": 8,
                "formatter": "\u8f83\u96be : 30.3%"
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u4fe1\u5b89",
                "\u5927\u6570\u636e",
                "\u6570\u5a92",
                "\u7f51\u5de5",
                "\u8ba1\u79d1",
                "\u8f6f\u5de5"
            ],
            "selected": {},
            "type": "scroll",
            "show": true,
            "left": "80%",
            "top": "30%",
            "orient": "vertical",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "\u96be\u5ea6\u6bd4\u4f8b",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_ab4afa0cf205492aa490911172f1d7ca.setOption(option_ab4afa0cf205492aa490911172f1d7ca);
    </script>
<br/>    </div>
    <script>
            $('#8dce31e84b0f411c8c1148215dc6a931').css('border-style', 'dashed').css('border-width', '0px');$("#8dce31e84b0f411c8c1148215dc6a931>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#8dce31e84b0f411c8c1148215dc6a931'), function() { chart_8dce31e84b0f411c8c1148215dc6a931.resize()});
            $('#ab4afa0cf205492aa490911172f1d7ca').css('border-style', 'dashed').css('border-width', '0px');$("#ab4afa0cf205492aa490911172f1d7ca>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#ab4afa0cf205492aa490911172f1d7ca'), function() { chart_ab4afa0cf205492aa490911172f1d7ca.resize()});
            var charts_id = ['8dce31e84b0f411c8c1148215dc6a931','ab4afa0cf205492aa490911172f1d7ca'];
function downloadCfg () {
    const fileName = 'chart_config.json'
    let downLink = document.createElement('a')
    downLink.download = fileName

    let result = []
    for(let i=0; i<charts_id.length; i++) {
        chart = $('#'+charts_id[i])
        result.push({
            cid: charts_id[i],
            width: chart.css("width"),
            height: chart.css("height"),
            top: chart.offset().top + "px",
            left: chart.offset().left + "px"
        })
    }

    let blob = new Blob([JSON.stringify(result)])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}
    </script>
</body>
</html>
